<template>
  <!-- 右侧信息 -->
  <el-main class="information-container">
    <!-- 折叠面板 -->
    <el-collapse accordion class="folded-panel">
      <!-- 个人印章 -->
      <el-collapse-item
        class="personal-seal"
        :key="index"
        v-for="(item, index) in personalSealData"
      >
        <template slot="title" class="personal-text">
          <div style="padding: 0px 10px">
            {{ item.name }}
          </div>
        </template>

        <div class="seal">
          <img :src="`${Url + imgs}`"  class="imageCountainer" v-if="(sealText==0 && imgs)">
          <img src="@/assets/images/addSeal.png"  class="imageCountainer" v-if="(sealText==0 && !imgs)">

          <div class="imageCountainer" v-if="(sealText==1)">
            <el-upload
              class="upload-demo"
              :action="uploadImgUrl"
              list-type="picture-card"
              :on-success="handleUploadSuccess"
              :auto-upload="false"
              name="imgFile"
              ref="imageUpload"
              :show-file-list="true"
              :headers="headers"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog> 
          </div>
          <div class="seal-text" v-show="(sealText==1)">
            <div class="seal-text-top">请上传您的印章</div>
            <button class="seal-text-bottom" @click="confirmFn(),(sealText=0)">确定</button>
          </div>

          <div class="seal-text" v-show="(sealText==0)" >
            <div class="seal-text-top">
              注：调整后的印章仅会再当前及之后的成长报告中展示，不会影响已定稿的成长报告。
            </div>
            <button class="seal-text-bottom" @click="(sealText=1)">调整</button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 通用印章 -->
    <el-collapse accordion class="folded-panel">
      <el-collapse-item
        class="personal-seal"
        :key="index"
        v-for="(item, index) in sealData"
      >
        <template slot="title" class="personal-text">
          <div style="padding: 0px 10px">
            {{ item.sealName }}
          </div>
        </template>

        <div class="seal">
          <div class="seal-img">
            <img :src="`${Url + item.sealUrl}`" />
          </div>

          <div class="seal-text"  style="margin:1rem">
            <div class="seal-text-top">{{item.sealIllustrate}}</div>
          </div> 
        </div>
      </el-collapse-item>
    </el-collapse>

  </el-main>
</template>

<script>
import { listStudents, getStudents } from "@/api/myInfoTeacher/seal";
import { getToken } from "@/utils/auth";
import module from "@/allurlimg/img";
export default {
  props: {
  },
  data() {
    return {
      sealText: 0,
      personalSealData: [], // 个人印章
      sealData: [], // 通用印章
      imgData: null,
      avatar: "",
      imgs:'',
      number: 0,
      uploadList: [],
      dialogImageUrl: process.env.VUE_APP_BASE_API + `/business/seal/upload`,
      dialogVisible: false,
      hideUpload: false,
      studnetId: "",
      growKey: "",
      remark: "",
      growthId: "",
      uploadImgUrl: "process.env.VUE_APP_BASE_API+`/business/seal/upload`", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      Url: '',
    };
  },
  mounted() {
    this.getlistStudentsList();
    this.Url = module.host
  },
  components: {},
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  async created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + `/business/seal/upload`;
  },
  methods: {
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({ name: file.name, url: file.url });
        // this.uploadedSuccessfully();
      } else {
        this.number--;
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.imageUpload.handleRemove(file);
        // this.uploadedSuccessfully();
      }
    },
    // 上传结束处理
    uploadedSuccessfully() {
      this.uploadList = [];
      
      // if (this.number > 0 && this.uploadList.length === this.number) {
      this.fileList = this.fileList.concat(this.uploadList);
      // console.log(this.fileList, "fileList");
      // console.log("6666", this.fileList[1]);
      this.$emit("input", this.listToString(this.fileList));
    },
    confirmFn(){
      //点击上传图片
      this.$refs.imageUpload[0].submit();
      
      setTimeout(() => {
        this.getlistStudentsList()
      }, 1200)
    },

    getData(data) {
      this.sealData = []
      this.personalSealData = []

      console.log(data, "datas");
      for (const index in data) {
        // 个人印章
        if ( index == "个人印章" ) {
          if ( data[index] ) {
            this.imgs = data.个人印章.sealUrl;
            this.personalSealData.push({
              name: index,
              sealId: data[index].sealId,
              userId: data[index].userId,
            });
          } else {
            this.personalSealData.push({ name: index })
          }
        } else if (index !== "个人印章" && data[index].length > 0) {
          // 通用印章
          for (const key in data[index]) {
            if (!data[index][key]) return false
            this.sealData.push({
              sealIllustrate: data[index][key].sealIllustrate,
              sealName: data[index][key].sealName,
              sealUrl: data[index][key].sealUrl,
            });
          }
        }
      }
      this.sealText == 99
      this.$nextTick(function() {
        this.sealText == 0
      })

      // console.log(this.sealData, 'sealData');
      // console.log(this.personalSealData, 'personalSealData');
    },

    // 获取用户印章
    async getlistStudentsList() {
      this.fileList=[]

      const res = await listStudents();

      if ( res.data == undefined ) {
        this.$message.error("数据库错误请检查")
      } else if ( JSON.stringify(res.data[0])==="{}" ) {
        this.$message("数据为空")
      } else {

        let url = (res.data.个人印章 && res.data.个人印章.sealUrl) || "";
        this.fileList.push({ url: module.host + url });
        
        this.getData(res.data);
      }


    },
  },
};
</script>


<style scoped>
/* 信息内容 */
.information-container {
  display: flex;
  width: 100%;
  margin: 2.5rem 0px;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: .0625rem solid #f5f5f5;
}

.folded-panel {
  width: 100%;
  border: 0px;
  display: flex;
  flex-direction: column;
}

.personal-seal {
  margin: .25rem .625rem;
}

.personal-text {
  font-size: 1.25rem;
  color: #000000;
}

.seal {
  display: flex;
  flex-direction: row;
}

.seal-img {
  display: flex;
  height: 5rem;
  margin: .625rem;
  border-radius: 50%;
  background: #fff;
}

.seal-text {
  margin: .625rem;
  display: flex;
  flex-direction: column;
  margin-left: 12.5rem;
}

.seal-text-top {
  margin: .25rem 0;
  width: 25rem;
  font-size: .75rem;
  color: #111111;
}

.seal-text-bottom {
  margin: .25rem 0;
  width: 5.625rem;
  height: 2.5rem;
  font-size: .75rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #7c0000;
  border: 1px solid rgba(187, 187, 187);
}

.add-seal {
  width: 7.5rem;
  height: 2.5rem;
  display: flex;
  font-size: .875rem;
  color: #ffffff;
  border: 0;
  bottom: 1.875rem;
  border-radius: 3.75rem;
  position: absolute;
  z-index: 9;
  align-items: center;
  justify-content: center;
  background: #7c0000;
}
.upload-demo /deep/ .el-upload--picture-card {
  position: absolute;
  z-index: 2;
  height: 6.25rem !important;
  width: 6.25rem !important;
  top: 0;
  border-radius: 50%;
}

.el-icon-plus:before {
  content: "\A\E6D9\A上传印章" !important;
  font-size: 0.25rem !important;
  white-space: pre !important;
  color: rgba(124, 0, 0, 1);
}

.imageCountainer {
  position: absolute;
  z-index: 3;
  height: 6.25rem !important;
  width: 6.25rem !important;
  left: 10%;
  top: 15%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.upload-demo /deep/ .el-upload-list--picture-card .el-upload-list__item {
  z-index: 3;
  height: 6.25rem !important;
  width: 6.25rem !important;
  border-radius: 50%;
}
.imgs{
  z-index: 3;
  height: 6.25rem !important;
  width: 6.25rem !important;
  border-radius: 50%;
}
</style>